<template>
  <div class="container">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>涡流数据</el-breadcrumb-item>
      <el-breadcrumb-item>数据导入</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <h3>涡流数据导入</h3>
      <el-row :gutter="10" class="addRow">
        <el-col :span="6">
          <el-select v-model="outage" clearable placeholder="请选择大修轮次" @change="getTanks" size="mini">
            <el-option v-for="outage in outages" :key="outage.id" :label="outage.outage" :value="outage.outage"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="tank" clearable placeholder="请选择容器" size="mini">
            <el-option v-for="tank in tanks" :key="tank" :label="tank" :value="tank"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <div class="uploadContainer">
            <el-upload
              ref="uploadRef"
              :action="uploadURL"
              :on-remove="handleRemove"
              :limit="1"
              :file-list="fileList"
              :on-exceed="exceedLimit"
              :headers="uploadHeader"
              name="etdataExcel"
              :data="{ outage: outage, tank: tank }"
              accept=".xls,.xlsx"
              :before-upload="beforeUpload"
              :on-success="uploadSuccess"
            >
              <el-button size="small" type="primary">读取excel</el-button>

              <!-- <div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过5MB</div> -->
            </el-upload>
          </div>
        </el-col>
      </el-row>

      <div class="messageContainer" v-show="etdatas.length">
        <div>共读取了{{ outage }}大修{{ tank }}容器的{{ total }}条数据，其中数据库中已经存在{{ repeat }}条</div>
        <div class="btnContainer"><el-button type="primary" @click="confirmUpload" size="mini">确认上传数据</el-button></div>
        <div class="btnContainer"><el-button type="primary" @click="cancelUpload" size="mini">取消</el-button></div>
      </div>

      <el-table
        :data="etdatas"
        style="width: 100%"
        border
        highlight-current-row
        cell-class-name="tableCell"
        size="mini"
        :row-class-name="isReapeatRowClassName"
      >
        <el-table-column type="index" label="#" width="60"> </el-table-column>
        <!-- <el-table-column prop="outage" label="大修" width="60"> </el-table-column> -->
        <!-- <el-table-column prop="tank" label="容器" width="100"> </el-table-column -->
        <el-table-column prop="zone" label="ZONE" width="60"> </el-table-column>
        <el-table-column prop="row" label="ROW" width="52"> </el-table-column>
        <el-table-column prop="col" label="COL" width="50"> </el-table-column>
        <el-table-column prop="code" label="CODE" width="60"> </el-table-column>
        <el-table-column prop="cal" label="CAL" width="125"> </el-table-column>
        <el-table-column prop="volt" label="VOLT" width="70"> </el-table-column>
        <el-table-column prop="ph" label="PH" width="60"> </el-table-column>
        <el-table-column prop="ch" label="CH" width="80"> </el-table-column>
        <el-table-column prop="percent" label="%" width="50"> </el-table-column>
        <el-table-column prop="dist" label="DIST" width="60"> </el-table-column>
        <el-table-column prop="probe" label="PROBE" width="70"> </el-table-column>
        <el-table-column prop="is_new" label="是否重复" width="70"> </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      outage: '',
      outages: [],
      tank: '',
      tanks: ['ABP301RE', 'ABP401RE', 'ABP302RE', 'AHP601RE', 'AHP602RE', 'AHP701RE', 'AHP702RE'],
      fileList: [],
      etdatas: [],
      total: 0,
      repeat: 0,
      new: 0,
      // 上传文件的请求头
      uploadHeader: {
        Authorization: window.sessionStorage.getItem('token')
      },
      uploadURL: this.serverURL + '/api/etdata/uploadetdata/'
    }
  },
  created() {
    this.getBaseInfo()
  },
  methods: {
    async getBaseInfo() {
      const { data: res } = await this.$http.get('baseinfo/etdatainfo/')
      if (res.meta.status !== 200) {
        return this.$message.error('获取涡流添加基本数据失败，请联系管理员！')
      }
      // console.log(res)
      this.outages = res.data.outages
    },
    // 根据选择的大修轮次获取对应的容器
    async getTanks() {
      const { data: res } = await this.$http.get('etdata/gettanks/', { params: { outage: this.outage } })
      // console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error('获取容器列表失败')
      }
      this.tank = ''
      this.tanks = res.data.tanks
    },
    // 上传excel前确保大修轮次和容器已选择
    beforeUpload(file) {
      if (this.outage === '' || this.tank === '') {
        this.$message.warning('请先选择大修轮次和容器')
        return false
      }
    },
    // 文件上传成功时的处理函数
    uploadSuccess(response, file, fileList) {
      // console.log(response)
      if (response.meta.status === 200) {
        var res = response.data
        this.etdatas = res.etdatas
        this.total = res.total
        this.repeat = res.repeat
        this.new = res.new
        this.$message.success(`${res.total}条数据读取成功，其中${res.repeat}条数据库中已存在(标红部分)`)
      } else if (response.meta.status === 201) {
        this.$message.error('读取数据的格式错误，请使用标准格式！')
        this.$refs.uploadRef.clearFiles()
      } else {
        this.$message.error('读取数据失败，请联系管理员')
      }
    },
    // 删除待上传的文件
    handleRemove() {
      this.etdatas = []
    },
    // 处理上传数量超过一个的函数
    exceedLimit() {
      return this.$message.error('只能上传一个文件')
    },
    // 点击确认上传数据
    async confirmUpload() {
      const { data: res } = await this.$http.post('etdata/addetdata/', { etdatas: this.etdatas })
      if (res.meta.status === 200) {
        this.etdatas = []
        this.$refs.uploadRef.clearFiles()
        return this.$message.success(`共上传成功${res.data.new}条数据，自动忽略数据库中已存在的${res.data.repeat}条`)
      }
      return this.$message.error('数据上传失败！')
    },
    // 点击取消上传按钮
    cancelUpload() {
      this.etdatas = []
      this.$refs.uploadRef.clearFiles()
    },
    // 标记表格中的数据是否在数据库中已经存在
    isReapeatRowClassName({ row, rowIndex }) {
      if (row.is_new === 1) {
        console.log('是新的')
        return 'isNew'
      } else {
        console.log('是已经存在的')
        return 'isRepeat'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.addRow {
  .el-select {
    width: 100% !important;
  }
}
h3 {
  color: rgb(97, 97, 97);
}

.container {
  .uploadContainer > div {
    display: flex;
    justify-content: flex-start;
  }
  .messageContainer {
    display: flex;
    justify-content: flex-start;
    margin: 10px 0;
    color: rgb(97, 97, 97);
    .btnContainer {
      margin-left: 30px;
    }
  }
  .el-table__row {
    background-color: red !important;
  }
}
</style>
